<template>
  <div class="myEditor">
    <MenuBar v-if="editor" :editor="editor" />
    <editor-content
      :editor="editor"
      class="myEditor__content"
      ref="editorRef"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useEditor, EditorContent } from "@tiptap/vue-3";
import Highlight from "@tiptap/extension-highlight";
import TextAlign from "@tiptap/extension-text-align";
import StarterKit from "@tiptap/starter-kit";
import Image from "@tiptap/extension-image";
import MenuBar from "./menuBar/index.vue";
import "./index.scss";

const editor = useEditor({
  content: "",
  extensions: [
    StarterKit.configure({}),
    TextAlign.configure({
      types: ["heading", "paragraph"],
    }),
    Highlight,
    Image,
  ],
});

const editorRef = ref(null);

const getHTML = () => {
  return editorRef.value.getHTML();
};

defineExpose({ getHTML });
</script>
